<template>
  <div class="search-bar" @scroll="handleScroll">
  >
    <i class="fa-brands fa-searchengin search-icon"></i>
    <input
        @click="clearInput($event)"
        class="search-input"
        type="text"
        placeholder=" 输入要搜索的名称..."
        v-model="searchQuery"
        @input="onSearch()"
    />
  </div>
</template>


<script setup lang="ts">
import {inject, ref} from 'vue';

const handleScroll = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault()
};

import  {useSearchStore} from "../store/SearchResult.ts";

const searchQuery =  ref("") ;
const searchStore = useSearchStore();
function onSearch() {

    searchStore.updateResult(searchQuery.value)
  console.log("onsearch ", searchQuery.value)
}



function clearInput(event) {
  //获取点击位置
  let clientX = event.clientX;
  let clientY = event.clientY;
  //  660 , 685  点击位置
  if ( clientX > 660 && clientX < 685 && clientY> 10 && clientY < 40){
    searchQuery.value = '';
  }

}
</script>


<style>
:root {
  --primary-color: #3498db;
  --hover-background: #e0e0e0;
  --my_color: lightpink;
}
</style>
<style scoped>

.search-bar {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  align-content: center;
  background-color: transparent;
  width: 80%; /* 根据需要调整宽度 */
  height: auto ;
 /* &::before {
    color: var(--my_color);
    content: "x";
    cursor: pointer;
    pointer-events:none ;
    align-self: end;
    align-items: end;
    left: -5%;
    scale: 1.5;
    margin-bottom: 2.2%;
    margin-left: 100%;
    position: absolute;
    background-color: transparent;
  }*/

}

.search-icon {
  font-size: 24px;
  position: absolute;
  left: 20px; /* 图标距离左边的距离 */
  top: 50%;
  font-style: normal;
  font-weight: bold;
  transform: translateY(-50%); /* 垂直居中 */
  pointer-events: none; /* 防止图标干扰点击输入框 */
  color: lightpink; /* 图标颜色 */
}

.search-input {
  background-color: #342929;
  width: 100%;
  padding-left: 35px; /* 留出图标的空间 */
  padding-right: 10px;
  height: 40px; /* 根据需要调整高度 */
  border: 0 solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  text-align: center;
  color: white;

  &:focus, &:active,
  &:hover {
    background-color: #221d1d; /* 聚焦或悬停时的边框颜色 */
  }
}

.search-input:focus {
  border-bottom: 2px solid deepskyblue;
}

</style>